<template>
  <div>
    <el-input v-model="yardmanName" placeholder="请输入姓名" style="width: 200px; margin-left: -200px"></el-input>
    <el-select v-model="shopName" clearable placeholder="请选择店铺" style="margin-left: 20px">
      <el-option
          v-for="shop in shopData"
          :key="shop.id"
          :label="shop.name"
          :value="shop.name">
      </el-option>
    </el-select>
    <el-button type="primary" icon="el-icon-search" @click="select" style="margin-left: 100px">搜索</el-button>&nbsp;&nbsp;
    <el-button type="primary" @click="save" style="margin-left: 10px">新增</el-button>&nbsp;&nbsp;
    <el-button type="primary" @click="dropBatch" style="margin-left: 10px">批量删除</el-button>&nbsp;&nbsp;
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        border
        default-expand-all
    >
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="id"
          label="编号"
          width="100">
      </el-table-column>
      <el-table-column
          prop="yardman.name"
          label="姓名"
          width="100">
      </el-table-column>
      <el-table-column
          prop="yardman.age"
          label="年龄"
          width="110">
      </el-table-column>
      <el-table-column
          prop="yardman.gender"
          label="性别"
          width="100">
      </el-table-column>
      <el-table-column
          prop="yardman.phone"
          label="电话"
          width="110">
      </el-table-column>
      <el-table-column
          label="所属区域"
          width="110">
        <template slot-scope="props">
          <span v-for="item in props.row.address" :key="item.id">   {{ item.district }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="调度产品组"
          width="100">
        <template slot-scope="props">
          <span v-for="item in props.row.productTeam" :key="item.id">   {{ item.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="yardman.shop.name"
          label="所属店铺"
          width="100">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--新增对话框-->
    <el-dialog title="添加调度员"  :visible.sync="dialogFormVisible" @close="clearForm" center>
      <el-form :model="form" ref="ruleForm">
        <el-form-item label="编号"  prop=""  :label-width="formLabelWidth">
          <el-input v-model="form.id" autocomplete="off" placeholder="请输入编号"></el-input>
        </el-form-item>
        <el-form-item label="姓名"  prop="name"  :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender" :label-width="formLabelWidth">
          <el-input v-model="form.gender" autocomplete="off" placeholder="请输入性别"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off" placeholder="请输入电话"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass" :label-width="formLabelWidth">
          <el-input v-model="form.pass" autocomplete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="负责区域" prop="address" :label-width="formLabelWidth">
          <el-select v-model="addressData" clearable multiple placeholder="请选择区域" style="margin-left: 20px"
                     multiple-limit="2">
            <el-option
                v-for="address in addressList"
                :key="address.id"
                :label="address.district"
                :value="address.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="调度产品组" prop="productTeam" :label-width="formLabelWidth">
          <el-select v-model="productTeamData" clearable multiple placeholder="请选择产品组" style="margin-left: 20px"
                     multiple-limit="2">
            <el-option
                v-for="roductTeam in roductTeamList"
                :key="roductTeam.id"
                :label="roductTeam.name"
                :value="roductTeam.id">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="所属店铺" prop="shopId" :label-width="formLabelWidth">
          <el-select v-model="form.shopId" placeholder="请选择">
            <el-option
                v-for="shop in shopData"
                :key="shop.id"
                :label="shop.name"
                :value="shop.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" :label-width="formLabelWidth">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="ensure">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改对话框-->
    <el-dialog title="修改调度员"  :visible.sync="dialogFormVisible2" @close="clearForm" center>
      <el-form :model="form" ref="ruleForm">
        <el-form-item label="编号"  prop="id" :label-width="formLabelWidth">
          <el-input v-model="form.id" autocomplete="off" placeholder="请输入编号"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender" :label-width="formLabelWidth">
          <el-input v-model="form.gender" autocomplete="off" placeholder="请输入性别"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off" placeholder="请输入电话"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass" :label-width="formLabelWidth">
          <el-input v-model="form.pass" autocomplete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="负责区域" prop="address" :label-width="formLabelWidth">
          <el-select v-model="addressData" clearable multiple placeholder="请选择区域" style="margin-left: 20px"
                     multiple-limit="2" >
            <el-option
                v-for="address in addressList"
                :key="address.id"
                :label="address.district"
                :value="address.district">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="调度产品组" prop="productTeam" :label-width="formLabelWidth">

          <el-select v-model="productTeamData" clearable multiple placeholder="请选择产品组" style="margin-left: 20px"
                     multiple-limit="2" >
            <el-option
                v-for="roductTeam in roductTeamList"
                :key="roductTeam.id"
                :label="roductTeam.name"
                :value="roductTeam.name">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="所属店铺" prop="shopId" :label-width="formLabelWidth">
          <el-select v-model="form.shopId" placeholder="请选择" >
            <el-option
                v-for="shop in shopData"
                :key="shop.id"
                :label="shop.name"
                :value="shop.name">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="setOK">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
export default {
  name: "yardman",
  data() {

    return {
      tableData: [],
      addressList: [],
      shopData: [],
      yardmanAddress: [],
      roductTeamList: [],
      curPage: 1,
      pageSize: 5,
      total: 0,
      yardmanName: '',
      productTeamName: '',
      shopName: '',
      dialogFormVisible: false,
      dialogFormVisible2: false,
      addressData: [],
      productTeamData: [],
      addressData2: [],
      productTeamData2: [],
      formLabelWidth:'80px',
      form: {
        id: '',
        name: '',
        phone: '',
        age: '',
        gender: '',
        pass: '',
        shopId: '',
      },

    }
  },
  created() {
    this.queryByPage();
    this.queryShop();
    this.queryAddress()
    this.queryProductTeam()
  },
  methods: {
    //更换每页最大记录数
    handleSizeChange(val) {
      this.pageSize = val
      this.queryByPage()
    },
    //切换当前页
    handleCurrentChange(val) {
      this.curPage = val
      this.queryByPage()
    },
    async queryByPage() {
      let res = await this.$axios.get('/yardman/queryByPage', {
        params: {
          yardmanName: this.yardmanName,
          shopName: this.shopName,
          curPage: this.curPage,
          pageSize: this.pageSize
        }
      })
      this.tableData = res.data.data
      console.log(this.tableData)
      this.total = res.data.total
    },
    async queryAddress() {
      let res = await this.$axios.get('/district/queryAll')
      this.addressList = res.data.data;
      console.log('address:' + this.addressList)
    },
    async queryProductTeam() {
      let res = await this.$axios.get('/productTeam/queryAll')
      this.roductTeamList = res.data.data;
    },
    async queryShop() {
      let resp = await this.$axios.get('/shop/queryAll')
      this.shopData = resp.data.data
      console.log(this.shopData)
    },

    handleEdit(row) {
      console.log(row)
      this.form.id = row.id
      this.form.name = row.yardman.name
      this.form.phone = row.yardman.phone
      this.form.age = row.yardman.age
      this.form.gender = row.yardman.gender
      this.form.pass = row.yardman.pass
      let address = []
      row.address.forEach(function (item, i) {
        address[i] = item.district
      })
      this.addressData = address
      this.addressData2 = address
      let product = []
      row.productTeam.forEach(function (item, i) {
        product[i] = item.name
      })
      this.productTeamData = product
      this.productTeamData2 = product
      console.log(this.form.address)
      this.form.shopId = row.yardman.shop.name
      this.dialogFormVisible2 = true;

    },

    select() {
      this.curPage = 1;
      this.queryByPage()
    },
    //新增
    save() {
      this.dialogFormVisible = true
    },
//新增对话框确定按钮
    async ensure() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          let res = await this.$axios.get('/yardman/save', {
                params: this.form
              }
          )
          let params = new URLSearchParams()
          params.append("yardmanId", this.form.id)
          params.append("addressData", this.addressData)
          params.append("productTeamData", this.productTeamData)

          let resp = await this.$axios.get('/yardman/saveAll', {
                params
              }
          )
          if (res.data.code === 200 && resp.data.code === 200) {
            this.dialogFormVisible = false
            this.queryByPage()
          } else {
            alert("操作失败")
          }
        } else {
          return false;
        }
      })
    },
    clearForm() {
      this.form.id = ''
      this.form.name = ''
      this.form.phone = ''
      this.form.age = ''
      this.form.gender = ''
      this.form.pass = ''
      this.addressData=''
      this.productTeamData=''
      this.addressData1=''
      this.productTeamData2=''
      this.form.shopId=''
    },

    //编辑对话框确定按钮
    async setOK(){
      this.$refs.ruleForm.validate(async valid => {
        console.log(this.productTeamData2)
        console.log(this.productTeamData)
        if (valid) {
          let res = await this.$axios.get('/yardman/modify', {
                params: this.form
              }
          )
          let params = new URLSearchParams()
          params.append("yardmanId", this.form.id)
          params.append("addressData", this.addressData)
          params.append("productTeamData", this.productTeamData)
          params.append("addressData2", this.addressData2)
          params.append("productTeamData2", this.productTeamData2)
          let resp = await this.$axios.get('/yardman/modifyAll', {
                params
              }
          )
          if (res.data.code === 200 && resp.data.code === 200) {
            this.dialogFormVisible2 = false
            this.queryByPage()
          } else {
            alert("操作失败")
          }
        } else {
          return false;
        }
      })
      },
    //删除
    async handleDelete(row) {
      this.$confirm('此操作将永久删除该调度员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res=await this.$axios.get('/yardman/drop?yardmanId='+row.id)
        if(res.data.code===200){
          //alert(111)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.curPage=1
          this.queryByPage()
        }else {
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      /*console.log(row);*/
    },
    //批量删除
    dropBatch(){
      let ids=this.$refs.multipleTable.selection
      if(ids.length===0){
        this.$message({
          type: 'warning',
          message: '你还没有选择要删除的调度员!'
        });
        return
      }
      let temp=''
      ids.forEach((item,i)=>{
        temp+='&yardmanId='+item.id
      })
      temp=temp.substring(1)
      this.$confirm('此操作将永久删除调度员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res=await this.$axios.get('/yardman/drop?'+temp)
        if(res.data.code===200){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.curPage=1
          this.queryByPage()
        }else {
          this.$message({
            type: 'error',
            message: '删除失败'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

  }
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>